<template>
  <!-- 登录界面 -->
  <div class="login-container">
    <el-form
      ref="loginForm"
      class="login-form"
      :model="loginForm"
      :rules="rules"
      :inline="false"
      size="normal"
    >
      <el-form-item />
      <div
        class="login-title"
        style="font-size: 18px; font-weight: 550; padding-bottom: 20px"
      >
        账号登录
      </div>
      <el-form-item prop="username">
        <el-input
          v-model="loginForm.account"
          placeholder="请输入用户名"
          prefix-icon="el-icon-user"
          @keyup.enter.native="handleLogin"
        />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          v-model="loginForm.password"
          type="password"
          placeholder="请输入密码"
          prefix-icon="el-icon-lock"
          @keyup.enter.native="handleLogin"
        />
        <el-button type="text" @click="dialogVisible = true">忘记密码</el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          class="login-btn"
          type="primary"
          @click.native.prevent="handleLogin"
        >登录</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="忘记密码"
      :visible.sync="dialogVisible"
      width="30%"
      center
    >
      <span>请联系管理员修改密码</span>
      <br>
      <br>
      <br>

    </el-dialog>
    <!-- 右上角跳转 -->
    <div class="go-system">
      <a :href="goBackgound">
        <div class="main pointer">
          <span class="tools">后台管理系统</span>
          <img src="@/assets/images/png/right_forword.png" style="width:23px;height:23px;" alt="">
        </div>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      logo_img: require('../../assets/images/imge/logo.png'),
      back_system: require('@/assets/images/png/backSystem.png'),
      // 登录数据
      loginForm: {
        account: 'admin',
        password: '123456'
      },
      // 表单验证规则
      rules: {
        account: [
          {
            required: true,
            trigger: 'change',
            message: '请输入用户名'
          }
        ],
        password: [
          {
            required: true,
            trigger: 'change',
            message: '请输入密码'
          }
        ]
      },
      loading: false,
      dialogVisible: false
    }
  },
  computed: {
    // 获取后台链接
    goBackgound() {
      let host = ''
      if (process.env.NODE_ENV === 'development') {
        host = 'http://api.qitaijk.cn' + '/houtai.php/index/login'
      } else {
        host = 'http://' + window.location.host + '/houtai.php/index/login'
      }
      return host
    }
  },
  methods: {
    // 登录提交事件
    async  handleLogin() {
      // 清理数据
      window.localStorage.removeItem('loglevel:webpack-dev-server')
      // login()
      // console.log('this.loginForm', this.loginForm)
      // console.log(45)
      // 发送给vuex
      await this.$store.dispatch('user/login', this.loginForm)
      const login_info = this.$store.state.user.login_info
      console.log('info', this.$store.state.user.login_info)
      if (login_info.code === 0) {
        this.$message.error(login_info.msg)
      }
      this.$router.push({ path: '/' })
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #efefef;
  .login-form {
    background-color: #fff;
    height: 380px;
    width: 400px;
    box-shadow: 0 0 25px #cac6c6;
    border-radius: 10px;
    padding: 20px 70px;
    .login-title {
      font-size: 25px;
      font-weight: 600;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .login-btn {
      width: 100%;
    }
  }
}
// 右上角跳转
.go-system{
  position: fixed;
  right: 26px;
  top: 32px;
  .main{
    display: flex;
    align-items: center;
  }
  .tools {
    font-size: 16px;
    margin-right: 5px;
    border: none;
    color: rgba(112,112,112,1);
  }
}
</style>
